"use client"
import { useState } from 'react';
import styles from './page.module.scss'
import cx from 'classnames';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import { useRouter } from 'next/navigation';
import Modal from './components/Modal'
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';

export default function Home() {
  const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
  const router = useRouter()
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modelPrpos, setModelPrpos] = useState({ userInfo: {} });
  return (
    <div className={styles['home']}>
      <Swiper
        modules={[Navigation, Pagination, Autoplay]}
        spaceBetween={0}
        slidesPerView={1}
        // onSlideChange={() => console.log('slide change')}
        // onSwiper={(swiper) => console.log(swiper)}
        pagination={{
          bulletClass: 'swiper-pagination-bullet zlz',
          bulletActiveClass: 'swiper-pagination-bullet-active',
          "clickable": true,
        }}
        // navigation={true}
        loop={true}
        autoplay={{
          delay: 3000,
          disableOnInteraction: false,
        }}
      >
        {[1, 9].map((v, i) => <SwiperSlide key={i}>
          <div className={styles['carousel']}>
            <img src={`/imgs/clients/1-${v}.jpg`} alt="" width='100%' />
            {!i && <div>
              <div className={styles['title']}>用心创新 同心致远</div>
              <p>我们正在用心助力数字化创新经济转型升级，为客户和社会创造价值。基于客户的需求，我们的创新技术和全面的数字化解决方案涵盖众多的业务领域，能够帮助中国企业将数字化愿景变为现实。</p>
              <div className={styles['btn']} onClick={() => router.push('/clients/product-display')}>立即查看</div>
            </div>}
          </div>
        </SwiperSlide>)}
      </Swiper>
      <div className={styles['section1']}>
        <div className={cx(styles['title'], styles['bancen'])}>
          <span>产品展示</span>
          <span>- PRODUCTS -</span>
        </div>
        <div className={styles['content']}>
          <ul className={cx(styles['bancen'])}>
            <li>工业自动化</li>
            <li>驱区动技术</li>
            <li>能源</li>
            <li>医疗</li>
            <li>交通</li>
            <li>个人及家用产品</li>
          </ul>
        </div>

      </div>
      <div className={cx(styles['section2'], styles['bancen'])}>
        <div className={styles['title']}>
          <span>公司介绍</span>
          <span>ABOUT US</span>
        </div>
        <div className={styles['content']}>
          <div className={cx(styles['left'])}>
            <img src="/imgs/clients/1-2.jpg" alt="" />
          </div>&emsp;
          <div className={cx(styles['right'])}>
            <img src="/imgs/clients/1-3.jpg" alt="" />
            <p>作为新能源蓄电池领域的创新先锋，专注于提供全方位的蓄电池解决方案。公司汇聚行业资深专家，凭借先进技术，深入研发适配各类新能源设备的高性能蓄电池。从设计、生产到租赁服务，我们建立了全产业链服务体系，满足不同客户需求。无论是为电动汽车提供持久动力，还是助力储能电站稳定运行，绿能芯租都以可靠品质与高效服务，推动新能源产业迈向新高度，携手客户共同构建绿色、低碳的美好未来 。</p>
          </div>
        </div>
      </div>
      <div className={cx(styles['section3'], styles['bancen'])}>
        <div className={styles['item']}>
          <div className={styles['title']}>
            <span>工程案例</span>
            <span>CASE</span>
            <span></span>
            <span></span>
          </div>
          <div className={styles['content1']}>
            <img src="/imgs/clients/1-5.jpg" alt="" />
            <img src="/imgs/clients/1-5.jpg" alt="" />
            <img src="/imgs/clients/1-6.jpg" alt="" />
            <img src="/imgs/clients/1-7.jpg" alt="" />
          </div>
        </div>
        <div className={styles['item']}>
          <div className={styles['title']}>
            <span>行业新闻</span>
            <span>NEWS</span>
            <span></span>
            <span></span>
          </div>
          <div className={styles['content2']}>
            <div className={styles['list']}>
              <div>
                <span>20</span>
                <span>2017/06</span>
              </div>
              <div>
                <a href='javascript:;'>绿色场地发展帝康再获新突破: 专注拼装地板是关键</a>
                <p>近年来，随着全球对自然资源和气候变化关注度的提高,各国都面临着的压力,纷纷调...</p>
              </div>
            </div>
            <div className={styles['list']}>
              <div>
                <span>20</span>
                <span>2017/06</span>
              </div>
              <div>
                <a href='javascript:;'>绿色场地发展帝康再获新突破: 专注拼装地板是关键</a>
                <p>近年来，随着全球对自然资源和气候变化关注度的提高,各国都面临着的压力,纷纷调...</p>
              </div>
            </div>
            <div className={styles['list']}>
              <div>
                <span>20</span>
                <span>2017/06</span>
              </div>
              <div>
                <a href='javascript:;'>绿色场地发展帝康再获新突破: 专注拼装地板是关键</a>
                <p>近年来，随着全球对自然资源和气候变化关注度的提高,各国都面临着的压力,纷纷调...</p>
              </div>
            </div>
          </div>
        </div>
        <div className={styles['item']}>
          <div className={styles['title']}>
            <span>联系方式</span>
            <span>CONTACT</span>
            <span></span>
            <span></span>
          </div>
          <div className={styles['content3']}>
            <img src="/imgs/clients/1-8.jpg" alt="" width='100%' />
            <div>
              <p>联系QQ:258506508&emsp;&emsp;&emsp;&emsp;手机号码:130000000</p>
              <p>联系邮箱:xxx@.co.m</p>
              <p>联系电话:020-000000000-000000</p>
              <p>联系地址:XXX省XXX市XXX县XXX路XXX号</p>
            </div>
          </div>
        </div>
      </div>
      <img className={styles['customer']} src="/imgs/clients/customer.png" alt="" onClick={() => {
        setIsModalOpen(true);
        setModelPrpos({ userInfo })
      }} />
      <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} modelPrpos={modelPrpos} />
    </div>
  );
}
